<template>
  <div class="todayAttendance">
    <div class="title">今日出勤情况</div>
    <div class="flexEnd" style="margin-bottom:4%">
      <div class="nowTime">
        <span>数据更新时间：</span>
        <span>{{this.$store.state.nowTime}}</span>
      </div>
    </div>

    <!-- 人出勤 -->

    <div class="content">
      <div class="personAttendance flexBetween" v-for="res in attendanceData" :key="res.orgId">
        <div class="personLeft">
          <div>{{res.tenderCode}}</div>
          <div class="flexCenter2">
            <div style="margin-right:0.5rem">{{res.percentage}}</div>
            <img v-if="res.status==2" src="@/assets/img/xiajiang.png" alt />
            <img v-else src="@/assets/img/shangsheng.png" alt />
          </div>
        </div>
        <div class="personCenter">
          <span
            v-for="(item,index) in personRate(res.percentage.replace('%', '')).ten"
            :key="index+'personCenter'"
            style="display:inline-block;width:2.5rem;height:6.7rem;"
          >
            <!-- <div style="width:2.5rem;height:6.7rem"> -->
            <img src="@/assets/img/ren10.png" alt width="100%" height="100%" />
            <!-- </div> -->
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-if="(personRate(res.percentage.replace('%', '')).ten<10)&&(personRate(res.percentage.replace('%', '')).unit==0||personRate(res.percentage.replace('%', '')).unit==1)"
          >
            <img src="@/assets/img/ren0.png" alt width="100%" height="100%" />
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-if="personRate(res.percentage.replace('%', '')).unit==2||personRate(res.percentage.replace('%', '')).unit==3"
          >
            <img src="@/assets/img/ren3.png" alt width="100%" height="100%" />
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-if="personRate(res.percentage.replace('%', '')).unit==4||personRate(res.percentage.replace('%', '')).unit==5"
          >
            <img src="@/assets/img/ren5.png" alt width="100%" height="100%" />
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-if="personRate(res.percentage.replace('%', '')).unit==6||personRate(res.percentage.replace('%', '')).unit==7"
          >
            <img src="@/assets/img/ren8.png" alt width="100%" height="100%" />
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-if="personRate(res.percentage.replace('%', '')).unit==8||personRate(res.percentage.replace('%', '')).unit==9"
          >
            <img src="@/assets/img/ren8.png" alt width="100%" height="100%" />
          </span>
          <span
            style="display:inline-block;width:2.5rem;height:6.7rem;"
            v-for="(item,index) in personRate(res.percentage.replace('%', '')).kong"
            :key="index+'kong'"
          >
            <img src="@/assets/img/ren0.png" alt width="100%" height="100%" />
          </span>
        </div>
        <div class="personRight">{{res.attendancePersonTotal}}/{{res.personTotal}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // nowTime: moment(new Date()).format('YYYY-MM-DD HH:mm')
    }
  },
  computed: {
    ...mapState({
      attendanceData: (state) => {
        return state.dataCenterAttendance.orgAttendanceVOList
      }
    }),
   ...mapState({
      nowTime: (state) => {
        return state.nowTime
      }
    }),
  },
 
  methods: {
    moment,
    personRate(val) {
      val = Math.round(val)
      let data = {
        ten: 0,
        unit: 0,
        kong: 0
      }
      data.ten = Math.floor(val / 10)
      data.unit = val % 10
      data.kong = 10 - data.ten
      if (data.kong - 1 != -1) {
        data.kong = data.kong - 1
      } else {
        data.kong = 0
      }
      // console.log(data)

      return data
    }
  }
}
</script>

<style scoped>
.todayAttendance {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 1.6rem;
  padding: 1.6rem 0 0 1.5rem;
  color: #fff;
  margin-bottom: 2%;
}
.flexBetween {
  align-items: center;
}
.content {
  height: 78%;
  overflow: auto;
}
.content::-webkit-scrollbar {
  display: none;
}
.personAttendance {
  color: #0adeff;
  margin-left: 6.6rem;
  margin-bottom: 9.2rem;
}
.personLeft {
  width: 15%;
  margin-right: 5%;
  text-align: center;
}
.personCenter {
  width: 60%;
  margin-right: 5%;
}
.personCenter span {
  margin-right: 6%;
}
.personCenter span:nth-child(10) {
  margin-right: 0%;
}
.personRight {
  width: 15%;
}
.nowTime {
  color: #fff95c;
  margin-right: 6.1rem;
}
</style>